<template lang="html">
   <div class="main">
      <section class="money">
        <div class="title">可用余额（元）</div>
        <div class="available-money">￥{{userData.balance}}</div>
        <div class="info">如需重置请联系客服进行充值</div>
      </section>

      <section class="reward-money">
        <div class="flex content" style="justify-content: space-between;">
          <span class="title">奖励金</span>
          <i class="icon-car" @click="is_show=!is_show"></i>
        </div>
        <div class="detail" v-if="is_show">
          <div class="title">奖励金</div>
          <div class="flex" style="justify-content: space-between;">
            <div class="available-money">￥{{userData.reward}}</div>
            <mt-button class="cash" @click="goCash">去提现</mt-button>
          </div>
        </div>
      </section>

      <section class="garden-money flex">
        <p class="title">园林币</p>
        <p class="available-money">{{userData.garden_coin}}</p>
      </section>

      <section class="voucher flex">
        <p class="title">抵用券</p>
        <p class="available-money">￥{{userData.integral}}</p>
      </section>
    </div>

</template>

<script>
import { getUserCaptial } from '@/api/user'
import { Toast } from 'mint-ui'

export default {
  props:['main'],
  data(){
    return {
      userData: '',
      is_show: true,
    }
  },
  created () {
    getUserCaptial().then(res => {
      if (res.code === 1) {
        this.userData = res.data
      } else {
        Toast(res.message)
      }
    })
  },
  methods: {
    goCash(){
      this.$router.push({
        name: '提现奖励金'
      })
    }
  },

}
</script>

<style lang="less" scoped>

  .main{
    width: 100%;
    font-size: 3.2vw;
    margin-top: 40px;

    .flex{
      display: -ms-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: distribute;
    }

    .money{
      padding: 2vw 1.5vh;
      color: #ececec;
      background: rgb(0,175,255);

      >div{
        margin-bottom: 1.5vh;

        &:last-child{
          margin-bottom: 0;
        }

      }

      .title{

      }

      .available-money{
        padding-left: 2vw;
        font-size: 4.5vw;
        color: #fff;
      }

      .info{

      }

    }

    .reward-money{

      .content{
        padding: 2vw 1.5vh;

        >i{

        }
      }

      .detail{
        background: rgb(0,175,255);
        padding: 2vw 1.5vh;
        color: #ececec;

        >div{
          margin-bottom: 1.5vh;
        }

        .title{

        }

        .available-money{
          padding-left: 2vw;
          font-size: 4.5vw;
          color: #fff;
        }

        .mint-button.cash{
          padding: 0.4vh 3.6vw;
          font-size: 2.8vw;
          height: auto;
          border-radius: 0.8vw;
          color: #000;
          float: right;

        }
      }

    }

    .garden-money{
      padding: 2vw 1.5vh;
      justify-content: space-between;

      .available-money{
        font-size: 3.5vw;
      }
    }

    .voucher{
      padding: 2vw 1.5vh;
      justify-content: space-between;

      .available-money{
        font-size: 3.5vw;
      }
    }

  }
 
</style>
